%h1 Forms tests

=javascripts 'test/validation'

%form#buttons
  %button{:id => 'disabler'} Disable things
  %button{:id => 'setter1'} Set drop-down value
  %button{:id => 'setter2'} Set radio value
  %br/
  %br/
  %input{:type => 'radio', :name => 'foo-radio', :value => 1, :id => 'foo-radio-1'}
  %label{:for => 'foo-radio-1'} Value 1
  %input{:type => 'radio', :name => 'foo-radio', :value => 2, :id => 'foo-radio-2'}
  %label{:for => 'foo-radio-2'} Value 2
  %input{:type => 'radio', :name => 'foo-radio', :value => 3, :id => 'foo-radio-3', :disabled => 'disabled'}
  %label{:for => 'foo-radio-3'} Value 3
  %input{:type => 'radio', :name => 'foo-radio', :value => 4, :id => 'foo-radio-4'}
  %label{:for => 'foo-radio-4'} Value 4
  %br/
  %button{:id => 'check-foo'} Check value
  %br/
  %br/
  %br/
  %input{:type => 'checkbox', :name => 'checky', :id => 'checky', :value => 1}
  %label{:for => 'checky'} Checkbox test
  %br/
  %br/
  %br/
  %br/
  %label{:for => 'drop-down'} Options:
  %select#drop-down{:name => 'selectoptions'}
    %option Please choose
    %option{:value => '1'} Number one
    %option{:value => '2'} Number two
    %option{:value => '3'} Number three
    %option{:value => '4'} Number four
  %input{:type => 'submit', :value => 'Go!'}

%button{:id => 'evil'} Be evil!
%button{:id => 'replace'} Replace form!

#results

#form-wrapper
  %form#login{:method => 'get'}
    %div
      %label
        Username
        %input{:name => 'username'}
    %div
    %div{:class => "notshown"}
      %input{:name => 'notshown'}
    %div
      %label
        Confirm username
        %input{:name => 'username_confirmation'}
    %div
      %label{:for => 'email'} Your email
      %input{:name => 'email', :id => 'email'}
    %div
      %span Your age
      %input{:name => 'age', :type => 'text'}
    %div
      %span The password
      %input{:name => 'password', :type => 'password'}
    %div
      %label{:for => 'tc'} Accept Ts+Cs?
      %input{:name => 'ts-and-cs', :type => 'checkbox', :value => '1', :id => 'tc'}
    %div
      %input{:type => 'submit', :value => 'Sign in'}

%form#search{:action => '/service/search.html', :method => 'GET'}
  %div
    %label{:for => 'q'} Search terms
    %input{:name => 'q', :id => 'q'}
    %br/
    %input{:type => 'radio', :name => 'lucky', :value => 0}
    I'm feeling lucky
    %input{:type => 'radio', :name => 'lucky', :value => 1}
    No I'm not
  %div
    %input{:type => 'submit', :value => 'Go'}

#searches

=javascripts 'test/forms'

:plain
  <style type="text/css">
    form { margin: 18px 0; }
    label { font-family: Arial, sans-serif; font-style: italic; }
    input.invalid, .error-explanation { background: #fcc; border: 1px solid #900; }
    label.invalid { color: #f00; font-weight: bold; }
    .error-explanation { padding: 12px; margin: 12px; }
    
    #buttons label.js { display: inline; float: left; border: 1px solid #666; background: #eee; padding: 8px; margin-right: 8px; }
    #buttons label.js.checked { border-color: #393; background: #9f6; }
    #buttons label.js.focused { border-width: 2px; font-weight: bold; }
    #buttons label.js.hovered { background: #cef; }
    #buttons label.js.disabled { color: #666 !important; font-weight: normal !important; background: #fff !important; }
    
    input.focused { border: 2px solid #000; }
    label.focused { text-decoration: underline; }
    
    .select-container { clear: left; margin: 30px 0; width: 200px; }
    .select-display { border: 1px solid #000; }
    .select-list ul { border: 1px solid #666; background: #fff; }
    .select-list ul, .select-list li { list-style: none; margin: 0; padding: 0; }
    .select-list li { width: 182px; border-top: 1px solid #cce; padding: 4px 8px; }
    .select-list li.hovered { background: #cef; }
    
    .notshown { display: none; }
  </style>
